<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <title>title</title>
  <link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
  <style>
    html,body {
      height: 100%;
      width: 100%;
    }
    .header-box {
      /*border: 1px solid blue;*/
      position: relative;
      width: 100%;
      height: 43px;
      background-color: #ffffff
    }
    header {
      position: fixed;
      width: 100%;
      height: 43px;
      background-color: #ffffff;
      z-index: 11;
      box-shadow: 0 6px 20px #D7D7D7;
    }
    header .left {
      position: relative;
      width: 21.5px;
      height: 43px;
      left: 15px;
      background-image: url(../../icon/back.png);
      background-size: 21.5px 15.5px;
      background-position: center center;
      background-repeat: no-repeat;
      float: left;
    }
    header .center {
      position: relative;
      left: 37.5%;
      width: 25%;
      height: 43px;
      float: left;
      font-size: 18px;
      line-height: 43px;
    }
    header .right {
      width: 10%;
      height: 43px;
      float: right;
      margin-right: 7%;
      display: table;
    }
    .right .word1 {
      font-size: 14px; color: #6d7cd9; font-weight: bolder; text-align: center;
      line-height: 43px;
      display: table-cell;
      vertical-align: middle;
    }


    .searchbar-box {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 35px;
      background-color: #fff;
      z-index: 10;
    }
    .searchbar {
      position: fixed;
      width: 100%;
      height: 35px;
      background-color: #fff;
      z-index: 10;
    }
    .inputbar-box {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .inputbar {
      position: relative;
      width: 90%;
      height: 35px;
      margin-left: 5%;
      background-color: #fbfbfb;
      /*margin-left: -47%;
      margin-top: -40%;*/
      border-radius: 5px;
    }
    .input {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .inputbar img {
      position: relative;
      top: 10px;
      width: 16px;
      height: 18px;
      margin-left: 8px
    }

    .content-box {
      position: relative;
      width: 100%;
      height: auto;
    }
    .searchby_cata-box {
      width: 90%;
      height: 30%;
      margin-left: 5%;
    }


    .history-box {
      position: relative;
      width: 90%;
      height: auto;
      margin-left: 5%;
      padding-top: 4%;
      padding-bottom: 10%;
    }
    .title_2-box {
      position: relative;
      width: 100%;
      height: 50px;
    }
    .title_2 {
      font-size: 16px; color: #000;
      float: left;
    }

    .tag_box {
      padding-top: 15px;
      padding-bottom: 15px;
      position: relative;
      width: 95%;
      height: 120px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 15px;
      box-shadow: 0 6px 20px #D7D7D7;
    }
    .tag_2 {
      width: 33%;
      height: 40px;
      float: left;
    }
    .block_2 {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #fff;
      font-size: 16px; color: #000; text-align: center ;
      line-height: 40px;
    }

    .close {
      width: auto;
      height: 100%;
      font-size: 12px; color: #6d7cd9; text-align: left ;
      padding-left: 15px;
      line-height: 35px;
      float: left;
    }

    .tags_selected_box {
      width: 100%;
      height: 10%;
      position: relative;
    }

    .tags_selected {
      width: 100%;
      height: 10%;
      position: fixed;
      top: 43px;
      z-index: 10;
      background-color: #fff;
    }

    .disabled {
      pointer-events: none;
    }


  </style>
</head>
<body>
<div id=“body1” class="searchbar-box">
  <div class="searchbar">
    <div class="inputbar-box">
      <div class="inputbar">
        <img src="../../icon/search.png" alt="">
        <input id="input" type="text" oninput="chanege_content(event)" onpropertychange="chanege_content(event)"  class="input" placeholder="" style='padding-left:30px' onclick="">
      </div>
    </div>
    <div class="filter-box">
      <div class="filter"></div>
    </div>
  </div>
</div>

<div class="content-box">



  <div class="history-box">
    <div class="title_2-box">
      <div class="title_2">我关注的</div>
    </div>
    <div id="tag_box" class="tag_box">
    </div>
  </div>

</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.min.js"></script> -->
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript">

    var people_list = []; //用来存放后端返回的关注列表
    var tag_dict;
    var tag_data;
    var cplist = new Array();  //用于存放每次添加@人时的列表,每次进入或者退出页面时需要被清空
    var people_count; //记录@的人数量

    apiready = function(){
        cplist = [];
        tag_dict ={
            "user_id":"e3b3dc8d20b7052f5c0799f3aa4e9f3e",
            "since_id":0,
            "page_size":10
        }


        getData(tag_dict);
        people_list = $api.getStorage('people_list');  //存放从后端取出来的user的关注标签
        view_tags();
    };

    function getData(json) {
        $.ajax({
            type: 'POST',
            // url: "http://1.82.238.228:80/api/questionAnswer/getQuestion/",
            url: "http://1.82.238.228:80/api/tag/getTags/",
            data:JSON.stringify(json),
            // crossDomain: true,
            dataType: 'json',
            async: false,
            success:function(result){
                console.log('标签加载成功')
                tag_data =  result.data
                // view_tips(result)
            },
            error:function(){
                console.log('标签加载失败');
            }
        });

    }
    function view_tags() {
        for (var i=0; i<tag_data.length; i++) {
            parentNode = document.getElementById('tag_box');
            sourceNode = document.createElement('div');
            sourceNode.setAttribute('class','tag_2');
            sourceNode.setAttribute("tapmode",'');
            // $(sourceNode).attr('onclick','add_tag(this)');
            sourceNode.onclick = function(){add_tag(this)};
            parentNode.appendChild(sourceNode);
            childNode = document.createElement('div');
            childNode.setAttribute('class','block_2');
            sourceNode.appendChild(childNode);
            grandNode = document.createElement('div');
            grandNode.setAttribute('class','word');
            grandNode.innerHTML = tag_data[i].name;
            childNode.appendChild(grandNode);
        }
    }
    function back(){
        api.closeWin();
    }

    function delete_tag(tag){
        tag.parentNode.parentNode.removeChild(tag.parentNode);

    }
    function add_tag(div) {

        var text = div.childNodes[0].childNodes[0].innerHTML;
        cplist.push(text);
        $api.setStorage('choose_people', cplist);
        console.log($api.getStorage('choose_people'))
        $api.setStorage('tags',text);
        var jsfun ='line_num = Math.floor(($api.getStorage("people_num")-1)/3+1); var parentNode = document.getElementById("tags_box");var sourceNode = document.createElement("div");sourceNode.setAttribute("class","tag_2");parentNode.appendChild(sourceNode);var childnode = document.createElement("div");childnode.setAttribute("class","block_2");sourceNode.appendChild(childnode); var grandnode1 = document.createElement("div");grandnode1.setAttribute("class","word");grandnode1.innerHTML = $api.getStorage("tags");var grandnode2 = document.createElement("div");grandnode2.setAttribute("class","delete");grandnode2.innerHTML = "×";grandnode2.onclick=function(){delete_tag(this)};grandnode2.setAttribute("tapmode","");childnode.appendChild(grandnode1); childnode.appendChild(grandnode2);$api.byId("selected_tags").style.display="";api.setFrameAttr({name: "at_frm",rect: {x: 0,y:60+60*line_num,w: api.winWidth,h: api.winHeight},});'
        api.execScript({
            name: 'at_win',
            script: jsfun
        });
        people_count = $api.getStorage('people_num');
        console.log(people_count)
        $api.setStorage('people_num',parseInt(people_count)+1);
        $api.addCls(div, 'disabled');
    }

    function Reactive(name) {
        list2 = $api.domAll('.disabled');
        for (var i = 0; i < cplist.length; i++) {
            if (list2[i].childNodes[0].childNodes[0].innerHTML == name) {
                $api.removeCls(list2[i], 'disabled');
                var index = cplist.indexOf(name)
                cplist.splice(index,1)
                $api.setStorage('choose_people', cplist);
            }
        }
    }



    function fabu(){
        api.openWin({
            name: 'fabu',
            url: '../../html/question_submit.html',
            bgColor: "#fff"
        });
    }
</script>
</html>
